<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>3级横向导航菜单</title>
    <style>
        .suckerdiv ul{
            margin: 0;
            padding: 0;
            list-style-type: none;
            width: 150px;
            border-bottom: 1px solid #ccc;
        }

        .suckerdiv ul li{
            position: relative;
        }
        .suckerdiv ul li ul{
            left: 149px;
            position: absolute;
            width: 160px;
            top: 0;
            display: none;
        }

        .suckerdiv ul li ul li ul{
            left: 159px;
        }

        .suckerdiv ul li a{
            display: block;
            color: black;
            text-decoration: none;
            font:12px 宋体;
            background: #fff;
            padding: 5px 5px;
            border: 1px solid #ccc;
            border-bottom: 0;
        }
        .suckerdiv ul li a:visited{
            color: black;
        }
        .suckerdiv ul li a:hover{
            color: white;
            background-color: gray;
        }
        .suckerdiv .subfolderstyle{
            background: url(http://www.codefans.net/jscss/demoimg/201201/arrow-list.gif) no-repeat center right;
        }
        * html .suckerdiv ul li { float: left; height: 1%; }
        * html .suckerdiv ul li a { height: 1%; }
    </style>
    <script type="text/javascript">
        var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas
        function buildsubmenus(){
            for (var i=0; i<menuids.length; i++){
                var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
                for (var t=0; t<ultags.length; t++){
                    ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
                    ultags[t].parentNode.onmouseover=function(){
                        this.getElementsByTagName("ul")[0].style.display="block"
                    }
                    ultags[t].parentNode.onmouseout=function(){
                        this.getElementsByTagName("ul")[0].style.display="none"
                    }
                }
            }
        }

        if (window.addEventListener)
            window.addEventListener("load", buildsubmenus, false)
        else if (window.attachEvent)
            window.attachEvent("onload", buildsubmenus)
    </script>
</head>
<body>

<div class="suckerdiv">
    <ul id="suckertree1">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Folder 1</a>
            <ul>
                <li><a href="#">Sub Item 1.1</a></li>
                <li><a href="#">Sub Item 1.2</a></li>
            </ul>
        </li>
        <li><a href="#">Item 3</a></li>

        <li><a href="#">Folder 2</a>
            <ul>
                <li><a href="#">Sub Item 2.1</a></li>
                <li><a href="#">Folder 2.1</a>
                    <ul>
                        <li><a href="#">Sub Item 2.1.1</a></li>
                        <li><a href="#">Sub Item 2.1.2</a></li>
                        <li><a href="#">Sub Item 2.1.3</a></li>
                        <li><a href="#">Sub Item 2.1.4</a></li>
                    </ul>
                </li>
            </ul>
            </a>
        </li>
        <li><a href="#">Item 4</a></li>
    </ul>
</div>
</body>
</html>